<template>
  <div class="dialogBox">
    <el-dialog
      v-model="props.dialogVisible"
      :title="state.modelComObj?.modelName + '模型评价'"
      width="50%"
      :before-close="closeDialog"
    >
      <!-- 盒子主体 -->
      <div class="dialoBox-body">
        <div class="model-back-heard">
          <span class="heard-left">{{ state.modelComObj?.modelName || '--' }}</span>
          <div class="heard-right">
            <span class="right-average">模型平均评分</span>
            <span class="right-number">{{
              state.modelComObj?.avgScores < 0 ? '--' : state.modelComObj?.avgScores
            }}</span>
          </div>
        </div>
        <div class="model-back-main">
          <div
            class="evaluate-item"
            v-for="(item, index) in state.modelComObj?.comments"
            :key="index"
          >
            <div class="item-left">
              <div class="item-left-font">
                {{ item?.comContent || '--' }}
              </div>
              <div class="user-info">
                <span class="info-font">评价人：{{ item?.comPerson || '--' }}</span>
                <span class="info-font">评价时间：{{ item?.comTime || '--' }}</span>
              </div>
            </div>
            <div class="item-right">
              <div class="item-pingfen">
                <span class="item-right-font">评分</span>
                <span class="item-right-font font-color">{{ item?.scores }}</span>
              </div>
              <span class="delete-btn" @click="handledeleteCom(item?.id)">删除</span>
            </div>
          </div>
        </div>
        <div class="model-back-bottom">
          <div class="bottom-btn">
            <span class="feedBack-btn" @click="handleFeedBack()">反馈</span>
          </div>
          <div class="write-box">
            <div class="write-box-left">
              <!-- 评价内容 -->
              <el-input
                v-model="state.comContent"
                :rows="6"
                style="width: 100%"
                type="textarea"
                placeholder="请填写评语"
              />
            </div>
            <div class="write-box-right">
              <span class="write-count">
                <!-- 评分 -->
                <el-input-number
                  v-model="state.scores"
                  :min="0"
                  :max="10"
                  @change="handleChange"
                  :precision="1"
                  :controls="false"
                />
              </span>
              <span class="write-font">分数</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import {
  // 查询模型评价内容
  getModelComments,
  // 添加模型评价
  addModelComment,
  // 删除评价
  deleteModelComment
} from '@/services/modules/home'
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  // title: {
  //   type: String,
  //   default: '模型评价反馈'
  // },
  // 模型信息
  modelItem: {
    type: Object,
    default: () => {}
  }
})
watch(
  () => {
    props.modelItem
  },
  () => {
    // 获取评价内容
    acceptModelCms(props.modelItem.id)
  },
  {
    deep: true
  }
)
const current = ref(1)
const state = reactive({
  // 模型评价内容
  modelComObj: {},
  // 需要提交的评价
  comContent: '',
  // 需要提交的评分
  scores: 0
})
const emit = defineEmits(['closeDialog'])
const closeDialog = () => {
  emit('closeDialog', false)
}
const handleChange = (value) => {
  console.log(value)
}
const changeBtn = (value) => {
  current.value = value
}
// 获取评价内容
const acceptModelCms = (id) => {
  getModelComments({ mid: id }).then((res) => {
    if (res.code == 200) {
      state.modelComObj = res.data
    }
  })
}
// 反馈评价
const handleFeedBack = () => {
  addModelComment({
    comContent: state.comContent,
    scores: state.scores,
    mid: props.modelItem?.id
  }).then((res) => {
    if (res.code == 200) {
      ElMessage.success('反馈成功')
      acceptModelCms(props.modelItem.id)
      state.comContent = ''
      state.scores = 0
    }
  })
}
// 删除评价
const handledeleteCom = (id) => {
  ElMessageBox.confirm('您确定要执行删除此评价吗？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteModelComment({ id }).then((res) => {
        if (res.code == 200) {
          ElMessage.success('删除成功')
          acceptModelCms(props.modelItem.id)
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
</script>

<style lang="less" scoped>
.dialogBox {
  :deep(.el-dialog__header) {
    border-bottom: 1px solid rgb(14, 13, 13);
  }
  .dialoBox-body {
    width: 100%;
    height: 600px;
    box-sizing: border-box;
    .model-back-heard {
      padding: 0 60px;
      height: 50px;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .heard-left {
        font-size: 26px;
        color: blue;
        font-weight: 600;
        line-height: 50px;
      }
      .heard-right {
        height: 50px;
        line-height: 50px;
        .right-average {
          margin-right: 30px;
          line-height: 50px;
          font-size: 17px;
        }
        .right-number {
          font-size: 26px;
          line-height: 50px;
          color: blue;
        }
      }
    }
    .model-back-main {
      width: 100%;
      height: 350px;
      padding: 0 20px;
      box-sizing: border-box;
      overflow-y: auto;

      .evaluate-item {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .item-left {
          width: 580px;
          height: auto;
          .item-left-font {
            padding: 5px;
            box-sizing: border-box;
            width: 580px;
            height: auto;
            // overflow-y: auto;
            line-height: 25px;
            font-size: 17px;
          }
          .user-info {
            height: 30px;
            width: 500px;
            box-sizing: border-box;
            padding: 5px;
            font-size: 17px;
            justify-content: space-between;
            line-height: 30px;
            display: flex;
          }
        }
        .item-right {
          width: 150px;
          height: 100px;
          text-align: center;
          .item-pingfen {
            text-align: center;
            .item-right-font {
              margin-right: 20px;
              font-size: 18px;
              font-weight: 600;
              color: dimgrey;
            }
            .font-color {
              color: blue;
            }
          }
          .delete-btn {
            margin-top: 20px;
            display: inline-block;
            width: 120px;
            height: 25px;
            border-radius: 5px;
            line-height: 25px;
            color: #ffffff;
            cursor: pointer;
            background-color: red;
          }
        }
      }
    }
    .model-back-bottom {
      padding: 0 20px;
      height: 220px;
      box-sizing: border-box;
      .bottom-btn {
        display: flex;
        // flex-direction: ;
        justify-content: flex-end;
        .feedBack-btn {
          height: 40px;
          line-height: 40px;
          font-size: 18px;
          text-align: center;
          color: #ffffff;
          border-radius: 5px;
          width: 170px;
          background-color: #169bd5;
          cursor: pointer;
        }
      }
      .write-box {
        height: 160px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .write-box-left {
          width: 75%;
        }
        .write-box-right {
          width: 20%;
          height: 145px;
          display: flex;
          align-items: center;
          .write-count {
            height: 100%;
            width: 90px;
            box-sizing: border-box;
            margin-right: 10px;

            :deep(.el-input) {
              width: 90px;
              height: 143px;
              margin-left: 0;
              font-size: 26px;
            }
            :deep(.el-input__inner) {
              color: #169bd5;
            }
          }
          .write-font {
            font-size: 17px;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>
